<template>

  <div class="partner">
    
    <div class="partner_top flex start_start">
      <div class="partner_top_l">
        <img class="partner_top_l_img" :src="info.imgs"  @click="showBig" alt="">
        <div class="partner_top_l_star">
          <!-- <i class="iconfont star icon-star"></i>
          <i class="iconfont star icon-star"></i>
          <i class="iconfont star icon-star"></i>
          <i class="iconfont star icon-star"></i>
          <i class="iconfont star icon-star5"></i> -->
          <i :class="[info.score>0?'iconfont star icon-star':'iconfont star icon-star5']"></i>
          <i :class="[info.score>1?'iconfont star icon-star':'iconfont star icon-star5']"></i>
          <i :class="[info.score>2?'iconfont star icon-star':'iconfont star icon-star5']"></i>
          <i :class="[info.score>3?'iconfont star icon-star':'iconfont star icon-star5']"></i>
          <i :class="[info.score>4?'iconfont star icon-star':'iconfont star icon-star5']"></i>
        </div>
      </div>
      <div class="partner_top_m">
        <div class="partner_top_m_top flex first_center">
          <div class="partner_top_m_name">{{info.name}}</div>
         <!--  <div class="partner_top_m_score">9分</div> -->
        </div>
        <div class="partner_top_m_state">未完成订单数量：{{info.unfinished_num}}</div>
        <div class="flex first_center">
          <div class="partner_top_m_serve">服务:{{info.service_num}}次</div>
          <div class="partner_top_m_review">点评:{{tabs[0].num}}</div>
        </div>
      </div>
      <div class="partner_top_r">
        <p class="partner_top_r_score">综合评分：{{info.score}}分</p>
        <!-- <p class="partner_top_r_grade">当前等级：三级</p> -->
      </div>
    </div>

    <ul class="tabTit">
      <li v-for="(item,index) in tabs" :class="{active:index == num}" @click="tab(index)">{{item.name}}（{{item.num}}）</li>
    </ul>
    <div class="tabCon">
      <ul>
        <li class="list_review" v-for="(itemCon,index) in tabContent0" v-show="0 == num">
          <div class="list_review_img">
            <img v-bind:src="itemCon.avatar">
          </div>
          <div class="list_review_time">{{itemCon.addtime}}</div>
          <div class="list_review_main">
            <div class="list_review_name">{{itemCon.nickname}}</div>
            <div class="list_review_star">
              评分&nbsp;
              <i v-bind:class="[itemCon.score>0?'iconfont star icon-star':'iconfont star icon-star5']"></i>
              <i v-bind:class="[itemCon.score>1?'iconfont star icon-star':'iconfont star icon-star5']"></i>
              <i v-bind:class="[itemCon.score>2?'iconfont star icon-star':'iconfont star icon-star5']"></i>
              <i v-bind:class="[itemCon.score>3?'iconfont star icon-star':'iconfont star icon-star5']"></i>
              <i v-bind:class="[itemCon.score>4?'iconfont star icon-star':'iconfont star icon-star5']"></i>
            </div>
            <div class="list_review_cont">{{itemCon.comment_detail}}</div>
          </div>
        </li>
      </ul>
      <!-- <ul>
        <li class="list_record" v-for="(itemCon,index) in tabContent1" v-show="1 == num">
          <div class="flex"><i class="iconfont icon_record icon-time1"></i><p>{{itemCon.dateline}}</p></div>
          <div class="flex"><i class="iconfont icon_record icon-dian"></i><p>{{itemCon.address}}</p></div>
        </li>
      </ul> -->
    </div>

    <!-- 放大图 -->
    <big-img v-show="showImg" @clickit="viewImg" :imgSrc="info.imgs"></big-img>

  </div>
  
</template>

<script>
import BigImg from '../../common/bigImg.vue'
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  name: "partner",
  data () {
    return {
      info: {},
      num: 0,
      tabs: [
        {
          name: '客户点评',
          num: '0',
        },
        // {
        //   name: '服务记录',
        //   num: '0',
        // },
      ],
      tabContent0: [],
      // tabContent1: [],
      // 大图
      showImg: false,
      imgSrc: '',
    }
  },
  mounted() {

    if(this.$route.params.uuid != undefined){
      
      localStorage.setItem("uuid",this.$route.params.uuid);
      localStorage.setItem("key",this.$route.params.key);
      
    }
      
    this.uuid = localStorage.getItem('uuid');
    this.key = localStorage.getItem('key');

    console.log("uuid:"+this.$route.params.uuid);
    console.log("key:"+this.$route.params.key);
    this.getInfo(this.uuid,this.key);

    this.$root.share();
  },
  components: {
    'big-img': BigImg
  },
  methods: {
    tab(index) {
      this.num = index;
    },

    // 获取信息
    getInfo(uuid,key){
      var that = this;
      axios.all([
        // axios.get(global.api.order.worker.own,{  //小伙伴信息
        //   params: {
        //     uuid: uuid,
        //   }
        // }),
        axios.get(global.api.index.search,{  //小伙伴信息
          params: {
            uuid: uuid,
            key: key,
          }
        }),
        axios.get(global.api.order.worker.service,{  //评价
          params: {
            uuid: uuid,
            page: '1',
            size: '1000',
          }
        }),
        // axios.get(global.api.order.worker.list,{  //服务记录
        //   params: {
        //     uuid: uuid,
        //     status: 1,
        //     type: 1,
        //     page: 1,
        //   }
        // }),
      ])
      .then(axios.spread(function(info,evaluate){
        console.log("getInfo then");
        console.log(info);
        that.info = info.data.data[0];
        that.tabContent0 = evaluate.data.data;
        // that.tabContent1 = service.data.list;
        that.tabs[0].num = evaluate.data.data.length;
        // that.tabs[1].num = service.data.totalNum;
      }))
      .catch(function(res){
        console.log(res);
      })
    },

    // 大图
    showBig(){
      this.showImg = true;
    },
    viewImg(){
      this.showImg = false;
    },
  },
}
</script>
  
<style scoped>
  .partner{}
  /* 头部 */
  .partner_top{
    padding: 0.5rem;
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
  }
  .partner_top_l{
    width: 4rem;
    margin-right: 4%;
  }
  .partner_top_l_img{
    width: 70%;
    margin-bottom: 0.2rem;
    border-radius: 50%;
  }
  .partner_top_l_star{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .star{
    color: #2ecc80;
    font-size: 0.8rem;
  }
  .partner_top_m{
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
  }
  .partner_top_m_top{
    font-weight: bold;
  }
  .partner_top_m_name{
    margin-right: 1rem;
  }
  .partner_top_m_score{

  }
  .partner_top_m_state{
    text-align: left;
    font-size: 0.9rem;
    padding: 0.3rem 0;
    color: #595757;
  }
  .partner_top_m_serve{
    font-size: 0.8rem;
    color: #888888;
    margin-right: 0.5rem;
  }
  .partner_top_m_review{
    font-size: 0.8rem;
    color: #888888;
  }
  .partner_top_r{
    width: 6rem;
    text-align: right;
  }
  .partner_top_r_score,.partner_top_r_grade{
    font-size: 0.85rem;
    color: #595757;
    margin-bottom: 0.4rem;
  }
  /*tab主体*/
  .tabTit{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    margin: 1.3rem 1rem 0.5rem;
    border: 1px solid #2ecc80;
    border-radius: 5px;
  }
  .tabTit li {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    height: 2rem;
    line-height: 2rem;
    color: #2ecc80;
    font-size: 0.9rem;
  }
  .tabTit .active{
    background-color: #2ecc80;
    color: #fff;
  }
  /*客户点评*/
  .list_review{
    position: relative;
    padding: 1rem;
    border-bottom: 1px solid #B3B3B4;
  }
  .list_review_img{
    position: absolute;
    left: 1rem;
    top: 1rem;
  }
  .list_review_img img{
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
  }
  .list_review_time{
    position: absolute;
    right: 1rem;
    top: 1rem;
    font-size: 0.8rem;
    color: #888888;
  }
  .list_review_main{
    padding-left: 3rem;
    text-align: left;
  }
  .list_review_name{
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
  }
  .list_review_star{
    font-size: 0.8rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    line-height: 1.7rem;
  }
  .list_review_cont{
    font-size: 0.8rem;
    line-height: 1.5rem;
    padding-right: 1rem;
  }
  /*服务记录*/
  .list_record{
    text-align: left;
    padding: 1rem;
    border-bottom: 1px solid #B3B3B4;
  }
  .list_record div{
    padding-left: 1rem;
    font-size: 0.9rem;
    line-height: 1.5rem;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .list_record i{
    font-size: 0.9rem;
    padding-right: 1rem;
  }
  .icon-dian{
    color: #2ecc80;
  }
</style> 
<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .side_center{
    justify-content: space-between;
    align-items: center;
  }
  .start_center{
    justify-content: flex-start;
    align-items: center;
  }
  .start_end{
    justify-content: flex-start;
    align-items: flex-end;
  }
  .start_start{
    justify-content: flex-start;
    align-items: flex-start;
  }
</style>
